<%@page import="com.hhit.collaborative_learning.entity.User"%>
<%@page
	import="com.hhit.collaborative_learning.dao.impl.PublicDaoImplMySql"%>
<%@page import="com.hhit.collaborative_learning.utils.Utils"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String userId = request.getParameter("userId");
	userId = userId == null
			? Utils.getCookieValue("userId", request)
			: userId;
	PublicDaoImplMySql dao = new PublicDaoImplMySql();
	User user = dao.getMyInfo(Integer.parseInt(userId));
	request.setAttribute("user", user);
	request.setAttribute("userId", userId);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/common1.css">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.css">
<!-- [if IE 7]-->
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<!-- [endif]-->
<link rel="stylesheet" href="css/persion_space_A.css">
<link rel="stylesheet" href="css/persion_space_B.css">
<link rel="stylesheet" href="css/mini.css">
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<!-- [if lt IE 9]-->
<script src="js/html5shiv.min.js"></script>
<script src="js/flashcanvas.js"></script>
<!-- [endif]-->
<script type="text/javascript">
	var username = 'u013534446';
	var oper_username = 'u013534446';
	var userNickName='<%=user.userNickName%>';
</script>
<style>
.csdn-toolbar .logo .img {
	background: url("css/images/f_name.png") left center no-repeat;
	float: left;
	height: 40px;
	margin-left: 10px;
	width: 120px;
}

.privacy {
	font-size: 14px;
	color: #2b81a9;
}

.main .persional_property .person-info .person-detail  .info_null {
	color: #e9733a;
}

.mod_personal_info .info li em a {
	color: #428bca;
}

.mod_personal_info .info li em a:hover {
	color: #2a6496;
}

.main .persional_property .person-status .status .scores em {
	cursor: pointer;
}

.main .persion_section .person_education .education_list dd em,.main .persion_section .person_job .job_list dd em
	{
	display: none;
}
</style>
</head>
<body>
	<div class="main clearfix">
		<div class="persional_property">
			<div class="person_info_con">
				<dl class="person-photo">
					<dt>
						<a href="javascript:;"><img
							src="<%=basePath %>userIcons/${user.userIcon}" class="header">
						</a>
					</dt>
				</dl>
				<dl class="person-info">
					<dt class="person-nick-name">
						<span>${user.userNickName }</span>
					</dt>
					<dd class="person-sign">
						<c:choose>
							<c:when test="${user.userBrief eq null||user.userBrief eq ''}">
							个人简介
						</c:when>
							<c:otherwise>${user.userBrief }</c:otherwise>
						</c:choose>
					</dd>
					<dd style="margin: 10px 0px">
						<div class="person-status clearfix">
							<div class="status">
								<span><a href="javascript:;" class="cb">${user.userPoint}</a>积分</span>
							</div>
						</div>
					</dd>
				</dl>

			</div>
		</div>
		<div class="persion_section">
			<c:choose>
				<c:when test="${userId eq cookie.userId.value }">
					<div class="person_detail_tab">
						<ul>
							<li data-modal="tab" class="current_detail" id="myinfo"
								style="width:428px;">我的资料</li>
							<li data-modal="tab" style="width:428px;" id="mydy">我的动态</li>
						</ul>
					</div>
				</c:when>
				<c:otherwise>
					<div class="mod_resource">
						<div class="tabs clearfix" id="tabResources">
							<a class="active" data-modal="tab" href="javascript:void(0);" id="submitedBlog">发表的博客</a><a
								data-modal="tab" href="javascript:void(0);" class="" id="submitedBBS">发布的帖子</a><a data-modal="tab"
								href="javascript:void(0);" class="" id="submitedData">贡献的资源</a>
						</div>
						<div id="divResources">
							<div class="list-blog list activeContent" data-modal="tab-layer">
							</div>
							<div class="list-posts list" data-modal="tab-layer">
							</div>
							<div class="list-resource list" data-modal="tab-layer">
							</div>
						</div>
					</div>
				</c:otherwise>
			</c:choose>
			<c:if test="${userId ne cookie.userId.value}">
				<div class="person_detail_tab2">
		          <ul id="tabDetail">
<!-- 		            <li class="" data-modal="tab">详细资料</li> -->
		            <li data-modal="tab" class="current_detail" style="width:858px;">最新动态</li>
		          </ul>
		        </div>
			</c:if>
			<div class="aboutMe">
				<c:choose>
					<c:when test="${userId eq cookie.userId.value }">
						<div nodeType="myDetails" nodeIndex="my0" data-modal="tab-layer"
							id="myDetails" class="myDetails current_content">
							<div class="" style="padding-top: 20px">
								<!-- 			<h1>编辑简介</h1> -->
								<!-- 			<a href="#" nodeType="close" class="close">×</a> -->
								<div
									style="background: #f3f3f3; border:1px solid #DCDCDC; margin:0 10px  20px;color:#333; font-size:16px; line-height:30px; padding:0 5px;">
									<span>用户名 : </span><span style='color: #666666;'>${user.userName}</span>
								</div>
								<div class="context">
									<form id="form" action="<%=basePath%>UpdateInfoServlet"
										enctype="multipart/form-data" method="post" class="form">
										<ul>
											<li class="mp_dl"><em class="red">*</em><span>昵称： <input
													id="userNickName" name="userNickName" nodeType="nickName"
													important="yes" value="${user.userNickName}" type="text"
													placeholder="支持中文、英文、数字、_、-" maxLen="20"
													class="nick_name mp_field1"> <!--em.nick_tip 昵称已被使用，请重新输入。--></span>
											</li>
											<li class="mp_dl"><span>头像： <input name="file"
													type="file" class="nick_name mp_field1" />&nbsp;&nbsp;&nbsp;&nbsp;<font
													color="red" size="2px">(如需修改，请选择图片)</font></span></li>
											<li>简述： <textarea name="userBrief" nodetype="selfdesc"
													id="userBrief" placeholder="300字以内" maxLen="300"
													class="intro_info mp_wid" style="width:560px">${user.userBrief}</textarea>
											</li>
										</ul>
									</form>
								</div>
								<div class="success">
									<a href="javascript:void(0);" id="saveinfo" nodeType="ok"
										class="ok">保存</a>
								</div>
							</div>
						</div>
						<div nodeType="myNews" nodeIndex="my1" data-modal="tab-layer" id="myNews" class="myNews">
							<div class="mod_per_dy">
								<h3>
									<a href="#" data-type="mine" class="mineTab active" id="mine">我自己的<i
										class="icon"></i></a><span></span><a href="#" data-type="focus"
										id="myfocus" class="focusTab">我关注的人<i class="icon"></i></a>
								</h3>
								<div class="mine" id="mine_con">
									<ul data-bind="my" id="myDynamic">
									</ul>
									<div class="more">
										<span class="icon-angle-down"></span><a
											href="javascript:void(0);" id="my_more">显示更多</a>
									</div>
								</div>
								<div class="focus" id="myfocus_con">
									<ul data-bind="follow" id="myFocusDynamic">
									</ul>
									<div class="more">
										<span class="icon-angle-down"></span><a
											href="javascript:void(0);" id="myfocus_more">显示更多</a>
									</div>
								</div>
							</div>
						</div>
					</c:when>
					<c:otherwise>
						<div class="myNews activeContent" data-modal="tab-layer" nodetype="myNews" id="div_myalldy">
            <div class="mod_per_dy">
              <h3><a class="mineTab active" data-type="mine" href="#">我的全部动态<i class="icon"></i></a></h3>
              <div class="mine">
                <ul data-bind="my" id="ul_myalldy">
                </ul>
                <div class="more" id="myalldy_more"><span class="icon-angle-down"></span><a href="javascript:void(0);">显示更多</a></div>
              </div>
            </div>
          </div>
					</c:otherwise>
				</c:choose>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function loadDynamic(userId,currentPage,type){
			$.post("<%=basePath%>LoadDynamicServlet",{userId:userId,currentPage:currentPage,type:type},function(data,status){
				var page=eval("("+data+")");
				if(page.list.length==0){
						var html="<li><span class='info icon-th-list no-mess' data-bind='myTitle'></span><div class='cont' data-bind='myCont'></div><span class='time' data-bind='myTime'></span></li>";
					if(type=='my'){
						if(page.currentPage==1){
							$("#myDynamic").append(html);
						}
						$("#mine_con .more").hide();
					}else if(type=='myfocus'){
						if(page.currentPage==1){
							$("#myFocusDynamic").append(html);
						}
						$("#myfocus_con .more").hide();
					}else{
						if(page.currentPage==1){
							$("#ul_myalldy").append(html);
						}
						$("#myalldy_more").hide();
					}
				}else{
					var html="";
					for(var i=0;i<page.list.length;i++){
						var dy=page.list[i];
						html+="<li><span class='info' data-bind='myTitle'>";
						if(type!='my'&&type!='myalldy'){
							html+="<a class='user_name' target='_blank' href='my.jsp?userId="+dy.comUserId+"'>"+dy.comUserName+"</a>";
						}
						html+="评论了博客：<a target='_blank' href='<%=basePath%>learning/article.jsp?userId="+dy.comUserId+"&blogId="+dy.blogId+"#comments'>"+dy.blogName+"</a></span>";
						html+="<div class='cont' data-bind='myCont'>"+dy.comContent+"</div>";
						html+="<span class='time' data-bind='myTime'>"+dy.time+"</span></li>";
					}
					if(type=='my'){
						$("#myDynamic").append(html);
						$("#my_more").attr("onclick","loadDynamic('"+userId+"',"+(currentPage+1)+",'my')");
					}else if(type=='myfocus'){
						$("#myFocusDynamic").append(html);
						$("#myfocus_more").attr("onclick","loadDynamic('"+userId+"',"+(currentPage+1)+",'myfocus')");
					}else{
						$("#ul_myalldy").append(html);
						$("#myalldy_more a").attr("onclick","loadDynamic('"+userId+"',"+(currentPage+1)+",'myalldy')");
					}
				}
			});
		}
		function loadMyResource(type){
			$.post("<%=basePath%>LoadResourceServlet",{userId:'<%=userId%>',type:type},function(data,status){
				var resource=eval("("+data+")");
				if(resource.list.length==0){
					if(type=='blog'){
						$(".list-blog").append("<li class='icon-th-list no-mess'><span>没有内容可显示</span></li>");
					}else if(type=='bbs'){
						$(".list-posts").append("<li class='icon-th-list no-mess'><span>没有内容可显示</span></li>");
					}else{
						$(".list-resource").append("<li class='icon-th-list no-mess'><span>没有内容可显示</span></li>");
					}
				}else{
					var html="";
					if(type=='blog'){
						for(var i=0;i<resource.list.length;i++){
							var re=resource.list[i];
							html+="<li class='clearfix' style='margin: 0px'>";
							html+="<a title='"+re.reTitle+"' class='tit' target='_blank' href='<%=basePath%>learning/article.jsp?blogId="+re.reId+"&userId=<%=userId%>'>"+re.reTitle+"</a>";
							html+="<span class='commend'><i class='comm_icon'></i>评论（"+re.comNum+"）</span><span class='dTime'>"+re.reHitNum+"人阅读</span></li>";
						}
						$(".list-blog").append(html);
					}else if(type=='bbs'){
						for(var i=0;i<resource.list.length;i++){
							var re=resource.list[i];
							html+="<li class='clearfix' style='margin: 0px'>";
							html+="<a title='"+re.reTitle+"' class='tit' target='_blank' href='<%=basePath%>community/article.jsp?topic={id:'"+re.reId+"'}'>"+re.reTitle+"</a>";
							html+="<span class='dTime'>"+re.reHitNum+"人阅读</span></li>";
						}
						$(".list-posts").append(html);
					}else{
						for(var i=0;i<resource.list.length;i++){
							var re=resource.list[i];
							html+="<li class='clearfix' style='margin: 0px'>";
							html+="<a title='"+re.reTitle+"' class='tit' target='_blank' href='<%=basePath%>download/downloadpage.jsp?dataId="+re.reId+"'>"+re.reTitle+"</a>";
							html+="<span class='commend'><i class='comm_icon'></i>评论（"+re.comNum+"）</span><span class='dTime'>下载"+re.reHitNum+"次</span></li>";
						}
						$(".list-resource").append(html);
					}
				}
			});
		}
		
		$(document).ready(function(){
			if('<%=userId%>'==$.cookie("userId")){
				loadDynamic('<%=userId%>',1,'my');
				loadDynamic('<%=userId%>',1,'myfocus');
			}else{
				loadDynamic('<%=userId%>',1,'myalldy');
				loadMyResource('blog');
				loadMyResource('bbs');
				loadMyResource('data');
			}
			$("#div_myalldy").show();
			$(".list-posts").hide();
			$(".list-resource").hide();
			$("#userNickName").blur(function(){
				var name=$(this).val();
				if(name==userNickName||(!name||!name.trim()))return;
				$.post("<%=basePath%>SelectUserNameServlet",{nickname:name},function(data,status){
					if(status=='success'&&data=='true'){
						
					}else{
						alert('该昵称已存在！');
						$('#userNickName').val(userNickName);
					}
				});
				
			});
			
			$("#saveinfo").click(function(){
				$(this).attr("disabled","true");
				if(!$("#userNickName").val()||!$("#userNickName").val().trim()){
					alert("昵称不能为空");
					$(this).attr("disabled","false");
					return;
				}
				if($("#userBrief").val()&&$("#userBrief").val().length>300){
					alert("个人简介最多300字");
					$(this).attr("disabled","false");
					return;
				}
				$('#form').ajaxSubmit({
					success: function(data) {
						if(data=='true'){
							alert("保存成功！");
							location.href="<%=basePath%>my.jsp";
						} else {
							alert(data);
							$(this).attr(
																							"disabled",
																							"false");
																		}
																	}
																});
											});

							$("#myinfo").click(function() {
								$(this).addClass("current_detail");
								$("#mydy").removeClass("current_detail");
								$("#myDetails").show();
								$("#myNews").hide();
							});
							$("#mydy").click(function() {
								$(this).addClass("current_detail");
								$("#myinfo").removeClass("current_detail");
								$("#myDetails").hide();
								$("#myNews").show();
							});
							$("#mine").click(function() {
								$(this).addClass("active");
								$("#myfocus").removeClass("active");
								$("#myfocus_con").hide();
								$("#mine_con").show();
							});
							$("#myfocus").click(function() {
								$(this).addClass("active");
								$("#mine").removeClass("active");
								$("#mine_con").hide();
								$("#myfocus_con").show();
							});
							
							$("#submitedBlog").click(function(){
								$("#submitedBlog").addClass("active");
								$("#submitedBBS").removeClass("active");
								$("#submitedData").removeClass("active");
								$(".list-blog").show();
								$(".list-posts").hide();
								$(".list-resource").hide();
							});
							$("#submitedBBS").click(function(){
								$("#submitedBBS").addClass("active");
								$("#submitedBlog").removeClass("active");
								$("#submitedData").removeClass("active");
								$(".list-blog").hide();
								$(".list-posts").show();
								$(".list-resource").hide();
							});
							$("#submitedData").click(function(){
								$("#submitedData").addClass("active");
								$("#submitedBBS").removeClass("active");
								$("#submitedBlog").removeClass("active");
								$(".list-blog").hide();
								$(".list-posts").hide();
								$(".list-resource").show();
							});

						});
	</script>
	<script src="js/jquery-ui-1.10.3.min.js"></script>
	<script src="js/jquery.form.js" type="text/javascript"></script>
	<script src="js/jquery.cookie.js" type="text/javascript"></script>
<!-- 	<script src="js/jquery-migrate-1.2.1.js" type="text/javascript"></script> -->
<!-- 	<script src="js/transparency.min.js" type="text/javascript"></script> -->

	<script src="js/jquery.autocomplete.js" type="text/javascript"></script>
<!-- 	<script src="js/screen_shot.js"></script> -->
	<!-- 	<script data-main="/assets2/js/config.mySpace.A.js" src="js/require.js"></script> -->
<!-- 	<script src="js/mini.js"></script> -->
</body>
</html>
